var navTimeoutStartOpen;
var navTimeoutStartClose;
var navTimeouts = new Array();
var navTimeoutsFade = new Array();
var opened = -1;
var fadeInStep = 0.02;
var fadeOutStep = 0.02;
var fadeInTime = 30;
var fadeOutTime = 10;
var opencloseTime = 10;
var listSuffix = 'navigationList_';

function initializeNavigation(){
  var lists = document.getElementById('lower').getElementsByTagName('ul');
  for(var i = 0; i < lists.length; i ++){
    navTimeoutsFade.push(new Array());
    lists[i].visibleHeight = 0;
    var items = lists[i].getElementsByTagName('li');
    for(var j = 0; j < items.length; j ++)
      items[j].style.opacity = 0;
  }
}

function openNavigation(listNumber){
  window.clearTimeout(navTimeoutStartOpen);
  window.clearTimeout(navTimeouts[listNumber]);
  for(var i = 0; i < navTimeoutsFade[listNumber].length; i++)
    window.clearTimeout(navTimeoutsFade[listNumber][i]);
  if(opened != -1 && opened != listNumber)
    closeNavigations();
  if(opened != listNumber){
    opened = listNumber;
    var list = document.getElementById(listSuffix + listNumber);
    list.style.height = 'auto';
    var maxHeight = list.offsetHeight;
    var items = list.getElementsByTagName('li');
    for(var i = 0; i < items.length; i ++)
      if(items[i].style.opacity != 0){
        window.clearTimeout(navTimeoutsFade[listNumber][i]);
        fadeIn(listNumber, i);
      }
    if(items.length > 0){
      var itemHeight = items[0].offsetHeight;
      openNavigationStep(listNumber, maxHeight, itemHeight);
    }
  }
}

function closeNavigations(){
  window.clearTimeout(navTimeoutStartOpen);
  window.clearTimeout(navTimeouts[listNumber]);
  for(var i = 0; i < navTimeouts.length; i ++){
    window.clearTimeout(navTimeouts[i]);
  }
  if(opened != -1){
    var listNumber = opened;
    opened = -1;
    var list = document.getElementById(listSuffix + listNumber);
    var items = list.getElementsByTagName('li');
    for(var i = 0; i < items.length; i ++)
      if(items[i].style.opacity != 1){
        window.clearTimeout(navTimeoutsFade[listNumber][i]);
        fadeOut(listNumber, i);
      }
    if(items.length > 0){
      closeNavigationStep(listNumber, items[0].offsetHeight);
    }
  }
}

/**
 * Diese Funktion wird von openNavigation() aufgerufen.
 * Die Navigations-Liste mit der &uuml;bergebenen Id wird ge&ouml;ffnet, indem
 * diese Funktion in bestimmten Zeitabst&auml;nden aufgerufen wird und die
 * H&ouml;he der Liste jedes mal um einen Pixel erh&ouml;ht.
 * Wenn ein neues List-Item freigelegt wurde, wird dieses mit fadeIn()
 * eingeblendet.
 * @param listNumber Die Nummer der betreffenden Liste.
 * @param maxHeight Die Höhe, bis zu der die Navigation ausgebreitet werden
 * soll.
 * @param height die H&ouml;he, die die Navigation nach diesem Funktions-Aufruf
 * haben soll.
 * @param itemHeight Die H&ouml;he in Pixeln, die ein li besitzt.
 * @param nextItem Der Index von dem Array itemHeights, welches Item als
 * n&auml;chstes eingeblendet werden soll.
 */
function openNavigationStep(listNumber, maxHeight, itemHeight){
  var list = document.getElementById(listSuffix + listNumber);
  height = list.visibleHeight;
  list.style.height = height + 'px';
  if(height != maxHeight){
    if(height%itemHeight == 0){
      var items = list.getElementsByTagName('li');
      for(var i = 0; i < items.length; i ++)
        if(items[i].style.opacity == 0){
          fadeIn(listNumber, i);
          break;
        }
    }
    height ++;
    navTimeouts[listNumber] = window.setTimeout('openNavigationStep('+listNumber+','+maxHeight+','+itemHeight+')', opencloseTime);
  }
  list.visibleHeight = height;
}

function closeNavigationStep(listNumber, itemHeight){
  var list = document.getElementById(listSuffix + listNumber);
  height = list.visibleHeight;
  list.style.height = height + 'px';
  if(height > 1){
    if(height%itemHeight == 0 || height == 140){ // todo Durch die Gesamthöhe ersetzen
      var items = list.getElementsByTagName('li');
      for(var i = items.length - 1; i >= 0; i --)
        if(items[i].style.opacity == 1){
          fadeOut(listNumber, i);
          break;
        }
    }
    height --;
    navTimeouts[listNumber] = window.setTimeout('closeNavigationStep(\''+listNumber+'\','+itemHeight+')', opencloseTime);
  }
  list.visibleHeight = height;
}

function fadeIn(listNumber, itemPos){
  var item = document.getElementById(listSuffix + listNumber).getElementsByTagName('li')[itemPos];
  var opacity = item.style.opacity*1 + fadeInStep;
  if(opacity > 1)
    opacity = 1;
  item.style.opacity = opacity;
  if(opacity < 1)
    navTimeoutsFade[listNumber][itemPos] = window.setTimeout('fadeIn(\''+listNumber+'\','+itemPos+')', fadeInTime);
}

function fadeOut(listNumber, itemPos){
  var item = document.getElementById(listSuffix + listNumber).getElementsByTagName('li')[itemPos];
  var opacity = item.style.opacity*1 - fadeOutStep;
  if(opacity - fadeOutStep < 0)
    opacity = 0;
  item.style.opacity = opacity;
  if(opacity > 0)
    navTimeoutsFade[listNumber][itemPos] = window.setTimeout('fadeOut(\''+listNumber+'\','+itemPos+')', fadeOutTime);
}

function outOfNavigation(e, element){
  var ziel = e.relatedTarget?e.relatedTarget:e.toElement;
  var kinder = element.getElementsByTagName('*');
  for(var i = 0; i < kinder.length; i++)
    if(kinder[i] == ziel || element == ziel){
      return;
    }
  navTimeoutStartClose = window.setTimeout('closeNavigations()', 10);
}

function notOutOfNavigation(e, element){
  var ziel = e.relatedTarget?e.relatedTarget:e.toElement;
  var kinder = element.getElementsByTagName('*');
  for(var i = 0; i < kinder.length; i++)
    if(kinder[i] == ziel || element == ziel){
      return;
    }
  window.clearTimeout(navTimeoutStartClose);
}